<!doctype html><head><title>mox-weapp接口说明</title><link rel="stylesheet" href="http://mozigu.net/assets/markdown.css"></head>

<h1>mogo微信小程序前端基础逻辑封装 1.5.3</h1>
<h1>1、使用方式</h1>
<ul>
<li><p>将dist目录中的文件拷贝到小程序项目根目录，重命名文件夹为mox-weapp</p>
</li>
<li><p>在小程序app.js中引入:</p>
<pre><code class="language-javascript">  import mox from &#39;./mox-weapp/index.js&#39;;</code></pre>
</li>
<li><p>在app.js中初始化:</p>
<pre><code class="language-javascript">  mox.init().then(data=&gt;{
      // 初始化成功
  });</code></pre>
</li>
</ul>
<h1>2、接口</h1>
<ul>
<li><p>mox.appid: 获取APPID</p>
</li>
<li><p>mox.user: 用户信息</p>
<pre><code class="language-javascript">  mox.user.openid
  mox.user.unionid</code></pre>
</li>
<li><p>mox.login(opts)：</p>
<ul>
<li>功能：登录，获取用户头像、昵称、unionid等(要获取unionid，需要把小程序绑定到微信开发平台<a href="https://open.weixin.qq.com">https://open.weixin.qq.com</a>)</li>
<li>参数：<ul>
<li>opts：可选参数<pre><code>  {
      title: &#39;&#39; // 登录界面的提示文字
  }</code></pre></li>
</ul>
</li>
<li>使用方式：<ul>
<li>引入weapp-ui:<ul>
<li>在页面的json文件中增加组件:<pre><code class="language-json">  &quot;usingComponents&quot;: {
      &quot;weapp-ui&quot;: &quot;/mox-weapp/components/index&quot;
  },</code></pre>
</li>
<li>在页面wxml最后面，增加节点: 注意，名字、id不能修改<pre><code class="language-html">  &lt;weapp-ui id=&#39;__weapp_ui__&#39;&gt;&lt;/weapp-ui&gt;</code></pre>
</li>
</ul>
</li>
<li>调用接口:<pre><code class="language-javascript">  mox.login().then( data=&gt;{
      // 登录成功，data为
      /*
      {
          openid: &#39;&#39;,
          unionid: &#39;&#39;,
          nickname: &#39;&#39;,
          avatar: &#39;&#39;,
          gender: 0,
          country: &#39;&#39;,
          city: &#39;&#39;,
          province: &#39;&#39;,
          language: &#39;&#39;
      }
      */
  }, err=&gt;{
      // 登录失败
  })</code></pre>
</li>
</ul>
</li>
</ul>
</li>
<li><p>mox.request: 网络请求<br>说明：mox.request在header中增加了appid、openid、unionid、session等信息，可以在服务器端能做校验</p>
<ul>
<li>调用mox.request.set_host指定业务域名<pre><code class="language-javascript">  mox.request.set_host(&#39;https://weapp.mozigu.net/mo_library&#39;);</code></pre>
</li>
<li>mox.request.get(path, params, enable_cache, expire_in)<ul>
<li>path: 请求路径，如&#39;/books&#39;，会跟set_host中的拼起来</li>
<li>params：请求参数，如{&#39;id&#39;: 123}</li>
<li>enable_cache: 是否启用缓存，如果开启，会在缓存过期前，优先使用本地localStorage缓存数据</li>
<li>expire_in: 缓存过期时间，单位秒</li>
</ul>
</li>
<li>mox.request.post(path, params)</li>
<li>mox.request.put(path, params)</li>
<li>mox.request.delete(path, params)</li>
<li>mox.request.disable_cache() 禁用缓存：主要是为了在dev下统一禁用request.get中的cache</li>
</ul>
</li>
<li><p>mox.audio: 播放音频<br> 在使用wx.createInnerAudioContext()时，有一些坑，业务上也存在需要支持多个文件顺序播放的诉求，故翻转了mox.audio，一方面将一些“坑”统一规避了，另外一方面支持顺序播放多个链接。</p>
<ul>
<li><p>mox.audio.play(urls, options)</p>
<ul>
<li>功能: 在全局通道播放一个或多个音频，当播放多个音频时，中间某一个播放失败，会继续播放后面的；<br>新调用play会将上次调用的停掉，如果想同时播放多个，请调用mox.audio.createAudioContext接口创建audio实例</li>
<li>参数: 参考InnerAudioContextEx.play</li>
<li>示例:<pre><code class="language-javascript">  // 调用参数参考InnerAudioContextEx.play
  mox.audio.play(...);</code></pre>
</li>
</ul>
</li>
<li><p>mox.audio.stop()</p>
<ul>
<li>功能: 停止播放全局通道的音频</li>
<li>参数: 无</li>
<li>示例:<pre><code class="language-javascript">  mox.audio.stop();</code></pre>
</li>
</ul>
</li>
<li><p>mox.audio.pause()</p>
<ul>
<li>功能：暂停全局通道的音频</li>
<li>参数：无</li>
<li>示例:<pre><code class="language-javascript">  mox.audio.pause();</code></pre>
</li>
</ul>
</li>
<li><p>mox.audio.resume()</p>
<ul>
<li>功能：恢复播放全局通道的音频，如果已经播放完，不会重新开始</li>
<li>参数：无</li>
<li>示例:<pre><code class="language-javascript">  mox.audio.resume();</code></pre>
</li>
</ul>
</li>
<li><p>mox.audio.pauseAll()</p>
<ul>
<li>功能：暂停全部AudioContext的播放</li>
<li>参数：无</li>
<li>示例:<pre><code class="language-javascript">  mox.audio.pauseAll();</code></pre>
</li>
</ul>
</li>
<li><p>mox.audio.resumeAll()</p>
<ul>
<li>功能：恢复全部AudioContext的播放</li>
<li>参数：无</li>
<li>示例:<pre><code class="language-javascript">  mox.audio.resumeAll();</code></pre>
</li>
</ul>
</li>
<li><p>mox.audio.stopAll()</p>
<ul>
<li>功能：停止全部AudioContext的播放</li>
<li>参数：无</li>
<li>示例:<pre><code class="language-javascript">  mox.audio.stopAll();</code></pre>
</li>
</ul>
</li>
<li><p>mox.audio.createAudioContext()</p>
<ul>
<li><p>功能：创建audioContext实例，实现多通道同时播放</p>
</li>
<li><p>参数：无</p>
</li>
<li><p>返回：InnerAudioContextEx对象</p>
</li>
<li><p>示例:</p>
<pre><code class="language-javascript">  var bgm = mox.audio.createAudioContext();

  let url = &#39;https://xxx.mp3&#39;;
  bgm.play(url, {
      success: res=&gt; {
          console.log(&#39;play success:&#39; ,res);
      },
      fail: res=&gt;{
          // res.err: 错误描述
          console.log(&#39;play fail:&#39; ,res);
      },
      complete: res =&gt; {
          console.log(&#39;play complete:&#39; ,res);
      }
  });</code></pre>
</li>
</ul>
</li>
<li><p>mox.audio.destroyAudioContext()</p>
<ul>
<li>功能：销毁audioContext实例</li>
<li>参数：InnerAudioContextEx对象</li>
<li>返回：无</li>
<li>示例:<pre><code class="language-javascript">  var bgm = mox.audio.createAudioContext();
  //
  ///...
  mox.audio.destroyAudioContext(bgm);</code></pre>
</li>
</ul>
</li>
<li><p>InnerAudioContextEx对象</p>
<ul>
<li><p>功能：对微信InnerAudioContext的封装与扩展</p>
</li>
<li><p>接口：</p>
<ul>
<li><p>InnerAudioContextEx.play(urls, options)</p>
<ul>
<li><p>功能: 播放一个或多个音频，当播放多个音频时，中间某一个播放失败，会继续播放后面的；</p>
</li>
<li><p>参数:</p>
<ul>
<li>urls: 音频链接，支持传入string和array，array里面的音频链接按顺序播放</li>
<li>options：可选参数, object<ul>
<li>success: 播放成功完成回调</li>
<li>fail: 播放失败回调，可以通过返回参数的err获取提示</li>
<li>complete: 播放完成回调(不管成功还是失败，都会调)</li>
</ul>
</li>
</ul>
</li>
<li><p>示例:</p>
<pre><code class="language-javascript">  var audio = mox.audio.createAudioContext();
  // 播放单个音频
  let url = &#39;https://xxx.mp3&#39;;
  audio.play(url, {
      success: res=&gt; {
          console.log(&#39;play success:&#39; ,res);
      },
      fail: res=&gt;{
          // res.err: 错误描述
          console.log(&#39;play fail:&#39; ,res);
      },
      complete: res =&gt; {
          console.log(&#39;play complete:&#39; ,res);
      }
  });

  // 播放多个音频
  let urls = [&#39;https://xxx.mp3&#39;, &#39;https://xxx2.mp3&#39;, &#39;https://xxx3.mp3&#39;];
  audio.play(urls, {
      success: res=&gt; {                    
          console.log(&#39;play success:&#39; ,res);
      },
      fail: res=&gt;{
          // res.err: 错误描述
          console.log(&#39;play fail:&#39; ,res);
      },
      complete: res =&gt; {
          // res.successed: array，播放成功的url列表
          // res.failed: array，播放失败的url列表
          console.log(&#39;play complete:&#39; ,res);
      }
  });</code></pre>
</li>
</ul>
</li>
<li><p>InnerAudioContextEx.stop()</p>
<ul>
<li><p>功能: 停止播放</p>
</li>
<li><p>参数: 无</p>
</li>
<li><p>示例:</p>
<pre><code class="language-javascript">  var audio = mox.audio.createAudioContext();

  // ...

  audio.stop();</code></pre>
</li>
</ul>
</li>
<li><p>InnerAudioContextEx.pause()</p>
<ul>
<li><p>功能：暂停</p>
</li>
<li><p>参数：无</p>
</li>
<li><p>示例:</p>
<pre><code class="language-javascript">  var audio = mox.audio.createAudioContext();

  // ...

  audio.pause();</code></pre>
</li>
</ul>
</li>
<li><p>InnerAudioContextEx.resume()</p>
<ul>
<li><p>功能：恢复播放，如果已经播放完，不会重新开始</p>
</li>
<li><p>参数：无</p>
</li>
<li><p>示例:</p>
<pre><code class="language-javascript">  var audio = mox.audio.createAudioContext();

  // ...

  audio.resume();</code></pre>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>mox.preload: 预加载模块</p>
<ul>
<li>mox.preload.load(urls, opts)<ul>
<li>功能：加载资源列表</li>
<li>参数：<ul>
<li>urls: url列表</li>
<li>opts: 可选项，object<pre><code>  {
      timeout: 5000,  // 每个url预加载的超时时间，单位毫秒，默认10s
      success: res=&gt;{  // 成功回调：全部都预加载成功才算成功
      },
      fail: res=&gt;{  // 失败回调：只要有一个失败就算失败
      },
      complete: res=&gt;{ // 完成回调：success和fail后都会调用
              res.successed;  // 成功的url列表
              res.failed;     // 失败的url列表 {url:&#39;&#39;, err: &#39;&#39;}
      },
      progress: res=&gt;{  // 进度回调
              res.url;     // 当前完成的url
              res.current; // 当前完成个数
              res.total;   // 总个数
      }
  }</code></pre></li>
</ul>
</li>
</ul>
</li>
<li>mox.preload.getPath(url)<ul>
<li>功能：获取预加载后的路径，若url未预加载，则直接返回url</li>
<li>参数：url</li>
<li>返回：url 或 预加载后的本地路径，可直接用于audio、video、image的src</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1>3、定制风格</h1>
<p>mox.theme设计用来支持项目的UI定制配置，weapp-js内部实现时，凡是支持外部定制风格时，都会通过theme获取配置。</p>
<ul>
<li>业务调用示例<pre><code class="language-javascript">  // 定制登录界面UI
  mox.theme.logo = {
      logo: &#39;/assets/login_logo.png&#39;  // 规范：248x248
  }</code></pre>
</li>
</ul>
<h1>4、版本历史</h1>
<ul>
<li><p>1.5.3 —— 2020-07-08</p>
<ul>
<li>增加录音组件增加beforeStart接口</li>
</ul>
</li>
<li><p>1.5.2 —— 2020-07-07</p>
<ul>
<li>增加录音模块和录音组件</li>
</ul>
</li>
<li><p>1.5.1 —— 2020-04-02</p>
<ul>
<li>优化session的login，在login失败时，清理缓存的session</li>
<li>优化文件上传mox.uploadFile接口，文件上传通过任务异步检查校验结果</li>
</ul>
</li>
<li><p>1.5.0 —— 2020-03-17</p>
<ul>
<li>增加mox.preload模块，实现预加载管理</li>
<li>mox.audio内部接入preload，优先使用preload资源</li>
<li>mox.login支持通过参数指定登录提示语</li>
</ul>
</li>
<li><p>1.4.1 —— 2020-03-12</p>
<ul>
<li>修复mox.audio在stop或者通道被顶替后，未调用complete的问题</li>
</ul>
</li>
<li><p>1.4.0 —— 2020-03-09</p>
<ul>
<li>mox.audio 监听onAudioInterruptionEnd事，修复在iOS下下拉导致无法继续播放，无回调的问题(<a href="https://developers.weixin.qq.com/community/develop/doc/0006c276a6c430d8cb285121a5b000?_at=1583746710639">https://developers.weixin.qq.com/community/develop/doc/0006c276a6c430d8cb285121a5b000?_at=1583746710639</a>)</li>
<li>mox.audio增加createAudioContext和destroyAudioContext接口，用于支持同时播放多个音频</li>
<li>增加replay接口：重新播放</li>
</ul>
</li>
<li><p>1.3.1 —— 2020-03-06</p>
<ul>
<li>修复mox.audio在iOS中，当尚未onBegin就关闭小程序，再resume无法继续播放的问题</li>
</ul>
</li>
<li><p>1.3.0 —— 2020-02-26</p>
<ul>
<li>增加audio模块，提供播放音频文件的封装，支持多个文件顺序播放</li>
<li>mox.login接口增加对session_key过期的保护</li>
</ul>
</li>
<li><p>1.2.0</p>
<ul>
<li>增加mox.login接口，实现弹窗获取用户头像、昵称以及unionid逻辑</li>
<li>增加theme模块，用于支持定制模块的UI风格</li>
</ul>
</li>
<li><p>1.1.0</p>
<ul>
<li>增加mox.request模块，提供给业务发送请求，将appid、openid、unionid等放在header中</li>
<li>增加handle_ad接口，支持“统一广告处理”逻辑</li>
</ul>
</li>
<li><p>1.0.0</p>
<ul>
<li>基础的session、openid获取等逻辑</li>
<li>微信支付:payment</li>
<li>showModal、previewImage</li>
</ul>
</li>
</ul>
